import { useState, useEffect} from "react";

 export function useMouse(show=false) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
	if(show){
		var elem = document.createElement("div");
		document.body.appendChild(elem);
		elem.style.position="absolute";
		elem.style.fontsize="9px";
		elem.style.transform="scale(0.5)"
	}
    function handleMouseMove(event) {
      setPosition({ x: event.clientX, y: event.clientY });
	  if(show){
		  elem.innerText=`x:${event.clientX},y:${event.clientY}`;
		  elem.style.left=event.clientX+"px";
		  elem.style.top=event.clientY+"px";
		  
	  }
    }

    window.addEventListener("mousemove", handleMouseMove);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

  return position;
}

 
